<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
  <script src="/layui/layui.js" charset="utf-8"></script>
  <script src="/js/jquery-1.12.3.min.js" charset="utf-8"></script>
</head>
<body>

<br>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-block">
      <input type="text" name="pno" lay-verify="required" lay-reqtext="商品编号是必填项，岂能为空？" autocomplete="off"  class="layui-input" style="width:300px;">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" lay-verify="required" lay-reqtext="商品名称是必填项，岂能为空？"  autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>
 
  <div class="layui-form-item">
    <label class="layui-form-label">型号</label>
    <div class="layui-input-block">
      <input type="text" name="type" autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>
 
  <div class="layui-form-item">
    <label class="layui-form-label">品牌</label>
    <div class="layui-input-block">
      <input type="text" name="brand"  autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">颜色</label>
    <div class="layui-input-block">
      <input type="text" name="color" autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">规格1</label>
    <div class="layui-input-block">
      <input type="text" name="gunge1"  autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">规格2</label>
    <div class="layui-input-block">
      <input type="text" name="gunge2"  autocomplete="off" class="layui-input" style="width:300px;">
    </div>
  </div>


   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">介绍</label>
    <div class="layui-input-block">
      <textarea name="introduce" placeholder="介绍" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">上市时间</label>
    <div class="layui-input-block">
      <input type="date" name="uptime" autocomplete="off" class="layui-input" style="width:200px;">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">图片</label>
    <div class="layui-input-block">
      <button type="button"  class="layui-btn" id="test1" >上传图片</button>
      <input type="hidden" name="pic" id="pic">
      <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1"  style="width:80px;height:60px;">
        <p id="demoText"></p>
      </div>
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">进价</label>
    <div class="layui-input-block">
      <input type="number" name="price0"   autocomplete="off" class="layui-input" style="width:200px;">
    </div>
  </div>

   <div class="layui-form-item">
    <label class="layui-form-label">市场价</label>
    <div class="layui-input-block">
      <input type="number" name="price1"   autocomplete="off" class="layui-input" style="width:200px;">
    </div>
  </div>

   <div class="layui-form-item">
    <label class="layui-form-label">优惠价</label>
    <div class="layui-input-block">
      <input type="number" name="price2"   autocomplete="off" class="layui-input" style="width:200px;">
    </div>
  </div>

   <div class="layui-form-item">
    <label class="layui-form-label">库存</label>
    <div class="layui-input-block">
      <input type="number" name="num"   autocomplete="off" class="layui-input" style="width:200px;">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="add">添加</button>
    </div>
  </div>
</form>
 <br>

<script>
layui.use(['form'], function(){
  var form = layui.form
  ,layer = layui.layer;

  //监听提交
  form.on('submit(add)', function(data){
    var userInfo = data.field;
    var url = "{:url('goods/added')}";
    $.ajax({
        url:url,
        type:'post',
        data:userInfo,
        success:function(data){
                console.log(data)
                layer.msg(data, {
                    icon: 6,//成功的表情
                    time: 1000 //1秒关闭（如果不配置，默认是3秒）
                }, function(){
                    parent.location.reload();
                });
        },
    });
    return false;
  });
});

 
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
 

  //指定允许上传的文件类型
  upload.render({
    elem: '#test1'
    ,url: '{:url("upload/img")}' //改成您自己的上传接口
    ,accept: 'images' //普通文件
    ,acceptMime: 'image/*'
    ,size: 1024*5 //最大允许上传的文件大小
    ,number:1
    ,progress: function(n, elem){
       var percent = n + '%' 
       element.progress('demoText', percent);  
     }
    ,done: function(res){
      layer.msg(res.msg);
      $('#demo1').attr('src', '/'+res.data.src);
      $('#pic').val('/'+res.data.src);
      console.log(res);
    }
    });

 });
</script>

</body>
</html>